<template>
  <div class="cmp3">这是组件3 value:{{ value }}
    <input style="display: block;" v-model="value"> 
    <button style="margin: 20px 0;" v-myCopy="value" @click="copyHandle" :key="value">{{ copyText }}</button>
    <button style="display: block;margin: 20px 0;" @click="alertFn"> changeValue</button>
    <div>props test :{{ test }}</div>
  </div>
</template>
<script lang='ts' setup>
import { ref,defineProps } from 'vue';
defineOptions({
  name: "Cmp3"
})
const props = defineProps({
  test: {
    type: String,
    default:'test'
  }
})

console.log(props.test)
const alertFn = () => {
  value.value = 'changedValue'
  alert('change value')
}

const copyText = ref('copy')

const copyHandle = () => {
  copyText.value = 'copied'
  setTimeout(() => {
    copyText.value = 'copy'
  }, 5000);
}
const value = ref('defaultValue')

</script>
<style scoped lang='less'>
.cmp3 {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  font-size: 24px;
  background-color: #b16e6e;

  input {
    margin: 20px 0;
  }
}
</style>